<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="./vue.js"></script>
    <script>
        var Vheader = {
            template:`
                <header class='head'>
                    <span>{{ title }}</span>
                    <span>{{ count }}</span>
                    <button @click='countInc'>点击</button>
                </header>
            `,
            data() {
                return {
                    count: 0
                }
            },
            props: ['title'],
            methods: {
                countInc() {
                    this.count++;
                }
            }
        };

        var Vaside = {
            template: `
                <div class='aside'>
                    我是侧边栏
                </div>
            `
        };

        var Vcontent = {
            template: `
                <div class='content'>
                    <ul>
                        <li v-for = 'post in posts' :key='post.id'>
                            <h3>我的博客标题: {{ post.title }}</h3>
                            <p>我的博客内容: {{ post.content }}</p>
                        </li>
                    </ul>
                    <button @click='changeSize'>改变字体大小</button>
                </div>
            `,
            props: ['posts'],
            methods: {
                changeSize() {
                    // 通过$emit()方法来触发自定义的事件
                    // 第一个参数是自定义事件名称, 第二个参数就是传递的值
                    // this指的vue实例化对象的子类
                    this.$emit('postChangeSize', 3)
                },
            }
        }

        var Vmain = {
            data() {
                return {
                    fontsize: 18,
                }
            },
            template: `
                <div class='main' :style='{fontSize:fontsize+"px"}'>
                    <Vheader v-bind:title='title'></Vheader>
                    <div class='wrap'>
                        <Vaside/>
                        <Vcontent v-bind:posts="appPosts" @postChangeSize='clickHandler'/>
                    </div>
                </div>
            `,
            methods: {
                clickHandler(value) {
                    this.fontsize = this.fontsize+value;
                }
            },
            components:{
                // 挂载组件, 等价于Vheader:Vheader
                Vheader,
                Vaside,
                Vcontent
            },
            props: ['title', 'appPosts']
        };

        new Vue({
            el:'#app',
            template: `<Vmain :title="text" :appPosts="posts"/>`,
            data: {
                text: "hello word",
                posts: [
                    {id:1, title:"组件中的传值", content:"通过Prop传递数据"},
                    {id:2, title:"组件中的传值2", content:"通过Prop传递数据2"},
                    {id:3, title:"组件中的传值3", content:"通过Prop传递数据3"},
                ]
            },
            // 挂载组件
            components: {
                // 挂载子组件 key表示组件名 value:组件对象
                Vmain: Vmain
            }
        });
    </script>
</body>
</html>